<!--
 * @Author: liukeke
 * @Date: 2022-10-21 14:05:34
 * @LastEditTime: 2022-10-24 09:55:04
 * @Description: vue 视频直播拉流 rtmp,hls等，拖拽，动态添加多个视频。
-->
<template>
  <div>
    <el-row>
      <!-- 左侧列表区域 -->
      <el-col :span="3">
        <ul class="menu-list">
          <li
            v-for="(menu, index) of menuList"
            :key="index"
            @dragstart="dragItem(menu)"
            draggable="true"
          >
            {{ index }}-{{ menu.name }}
          </li>
        </ul>
      </el-col>

      <!-- 右侧视频分屏区域 -->
      <el-col :span="21">
        <el-row type="flex" :gutter="10" justify="center">
          <el-col :span="8">&nbsp;</el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-button-group>
                <el-button :type="classtype1" @click="tabRow('classtype1', 1)"
                  >单屏</el-button
                >
                <el-button :type="classtype2" @click="tabRow('classtype2', 2)"
                  >四分屏</el-button
                >
                <el-button :type="classtype3" @click="tabRow('classtype3', 3)"
                  >九分屏</el-button
                >
                <el-button :type="classtype4" @click="tabRow('classtype4', 4)"
                  >十六分屏</el-button
                >
              </el-button-group>
            </div>
          </el-col>
          <el-col :span="4">&nbsp;</el-col>
        </el-row>

        <el-container class="center">
          <el-main>
            <el-row :gutter="24">
              <el-col
                v-for="(videoItem, index) in videoList"
                :span="rowNumber"
                :class="videoclass"
                :key="index"
                :style="{ height: videoItemHeight }"
              >
                <div
                  class="player-wrapper"
                  element-loading-text="加载中..."
                  element-loading-background="#000"
                >
                  <div
                    class="video-wrapper"
                    :style="videoclass"
                    :id="`videoid${videoItem}`"
                  >
                    <div
                      class="video-inner live hide-waiting"
                      style="
                        position: absolute;
                        top: 0px;
                        bottom: 0px;
                        left: 0px;
                        right: 0px;
                      "
                    >
                      <!-- @dragover.prevent  给视频区域外层盒子添加拖拽事件 -->
                      <div
                        class="alt table-c"
                        @drop="dropVideo(videoItem)"
                        @dragover.prevent
                      >
                        <div class="talbetop">
                          <table>
                            <!-- 还未展示视频时的封面 -->
                            <tr v-if="!videoItem.src">
                              <td>暂时还未接入视频哦~</td>
                            </tr>
                            <tr v-if="videoItem.src">
                              <!-- 此处可更改为视频流,将src换成对应的视频流地址 例如:
                                    <video-player
                                      class="vjs-custom-skin videoPlayer"
                                      :options="videoItem.playerOptions"
                                      ref="videoPlayer"
                                      @play="onPlayerPlay($event,videoItem)"
                                      @pause="onPlayerPause($event,videoItem)"
                                      @ended="onPlayerEnded($event,videoItem)"
                                      @ready="playerReadied($event,videoItem)"
                                    ></video-player>
                                 -->
                              <video
                                controls="controls"
                                muted
                                :src="videoItem.src"
                              ></video>
                            </tr>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "test1",
  data() {
    return {
      videoclass:
        "padding-bottom: 54%; position: relative; margin: 0px auto; overflow: hidden;",
      classtype1: "",
      classtype2: "primary",
      classtype3: "",
      classtype4: "",

      videoList: [],
      // 总宽度为24份，默认的四个框的时候
      videoItemHeight: "50%",
      rowNumber: 12,
      // fornum: [
      //     {
      //         src: "",
      //     },
      //     {
      //         src: "",
      //     },
      //     {
      //         src: "",
      //     },
      //     {
      //         src: "",
      //     },
      // ],

      menuList: [
        {
          name: "山川",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/13/70/V-137009-A4970EDC.mp4",
        },
        {
          name: "旬月",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/15/79/V-157932-0D388B9F.mp4",
        },
        {
          name: "森林",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/11/32/V-113247-63975F10.mp4",
        },
        {
          name: "科技",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/12/49/V-124926-533372CA.mp4",
        },
        {
          name: "天空",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/15/65/V-156581-C4DB8F20.mp4 ",
        },
        {
          name: "海滩",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/15/21/V-152102-13B4D044.mp4",
        },
        {
          name: "白云",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/12/30/V-123077-A1EA0893.mp4",
        },
        {
          name: "红色",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/14/33/V-143360-2F7C34AD.mp4",
        },
        {
          name: "烟火",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/15/34/V-153443-20A3FA57.mp4",
        },
        {
          name: "水光",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/15/85/V-158541-2BE20959.mp4",
        },
        {
          name: "草原",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/15/08/V-150836-E1DDBB18.mp4",
        },
        {
          name: "舞台",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/14/28/V-142849-61113C76.mp4",
        },
        {
          name: "月夜",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/15/81/V-158199-1E165B92.mp4",
        },
        {
          name: "黛青",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/15/86/V-158640-4D33212E.mp4",
        },
        {
          name: "桃花",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/15/86/V-158644-1598F17E.mp4",
        },
        {
          name: "粒子",
          type: "rtmp/mp4",
          src: "https://video-qn.51miz.com/preview/video/00/00/14/97/V-149734-8E0014B0.mp4",
        },
      ],
      menuItem: "",
    };
  },

  watch: {},

  created() {
    this.addVideo(4);
  },

  mounted() {
    // 检测浏览器是否安装flash的方法,下面的非 ie ActiveXObject 会报错 视频流里可能会用到,此处没用
    // let isFlash = navigator.plugins['Shockwave Flash'] ? true : false
    //   if(!isFlash){
    //     this.flashErrShow = true
    //   }
  },

  methods: {
    // 切换不同的窗口
    tabRow(item, rowNum) {
      //分屏按钮效果的判断
      if (item === "classtype1") {
        this.classtype1 = "primary";
        this.classtype2 = "";
        this.classtype3 = "";
        this.classtype4 = "";
      } else if (item === "classtype2") {
        this.classtype1 = "";
        this.classtype2 = "primary";
        this.classtype3 = "";
        this.classtype4 = "";
      } else if (item === "classtype3") {
        this.classtype1 = "";
        this.classtype2 = "";
        this.classtype3 = "primary";
        this.classtype4 = "";
      } else if (item === "classtype4") {
        this.classtype1 = "";
        this.classtype2 = "";
        this.classtype3 = "";
        this.classtype4 = "primary";
      }
      // 1*1 ，2*2，3*3,4*4，因为矩阵的 排 和 列 的个数都是一样的
      this.rowNumber = 24 / rowNum; // 宽度
      this.videoItemHeight = 100 / rowNum + "%"; // 高度
      this.addVideo(rowNum * rowNum); // 个数
    },
    // 拖拽
    dragItem(item) {
      console.log(item);
      this.menuItem = JSON.parse(JSON.stringify(item));
      //       let video = [];
      //  video = document.getElementsByTagName("video");
      // console.log(video);
    },
    // 拖拽以后放入
    dropVideo(videoItem) {
      // if(this.flashErrShow){
      //   this.$message.error('请先按照提示启用Flash！');
      // }else{
      //   console.log(videoItem);
      // let video = [];
      // //这里我是用的video标签,所以通过操作dom获取所有的video标签 (我把事件绑给了外层,这里好像有点多余了)
      //  video = document.getElementsByTagName("video");

      //将左侧拖拽的视频网址赋值给右侧分屏的src

      // video[0].src = this.menuItem.src
      videoItem.src = this.menuItem.src;
    },
    // 添加视频布局的公共函数
    addVideo(forNum) {
      // console.log(forNum);
      this.videoList = [];
      for (let index = 0; index < forNum; index++) {
        this.videoList.push({ index: index, src: null, loading: false });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.video-wrapper {
  position: relative;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.alt {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  color: #fff;
  text-align: center;
}
.alt table {
  width: 100%;
  height: 100%;
}
.alt video {
  width: 100%;
  height: 100%;
}
.talbetop {
  width: 100%;
  height: 100%;
  position: relative;
}
.selectchannel {
  position: absolute;
  right: 5px;
  top: 5px;
}
.video-close {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #fff;
  font-size: 12px;
  background-color: hsla(0, 0%, 50%, 0.5);
  padding: 2px 5px;
  cursor: pointer;
  border-radius: 2px;
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.table-c table {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.table-c table td {
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
}

.player-wrapper {
  padding-bottom: 10px;
}
::v-deep .el-tree-node__content {
  height: 30px;
}

.menu-list {
  li {
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding: 0 10px;
    cursor: pointer;
    transition: all 1s ease;
  }
  li:hover {
    background: #e9eef3;
  }
}
</style>